<template>
	<view class="popupbox" :class="isClose ? '' : 'noclose'">
		<view class="content" :class="title? '' : 'notitle'">
			<div v-if="title">
				<!-- <img class="popup-top" src="@/static/images/jys01.png" alt="" />
				<img class="popup-top popup-topbg" src="@/static/images/jys02.png" alt="" /> -->
			</div>
			<el-scrollbar v-if="isScrollbar" style="max-height: 760rpx; min-height: 300rpx; display: flex; flex-direction: column;">
				<view class="popup-content" v-html="prompt"></view>
				<slot></slot>
				<view class="idoit" @click="popupDialog"><view class="mask"></view>I got it</view>
			</el-scrollbar>
			<view v-else>
				<view class="popup-content" v-html="prompt"></view>
				<slot></slot>
				<view class="idoit" @click="popupDialog"><view class="mask"></view>I got it</view>
			</view>
			<i class="closebtn el-icon-circle-close" v-if="isClose" @click="popupDialog"></i>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		prompt: {
			type: String,
			default: ''
		},
		title: {
			type: Boolean,
			default: true
		},
		isClose: {
			type: Boolean,
			default: true
		},
		isScrollbar: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		popupDialog() {
			this.$emit('popup-event', false)
		}
	}
}
</script>

<style lang="scss" scoped>
.popupbox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	// background: #fff url('../../static/images/task/task-file-rule-bg.png') no-repeat;
	z-index: 1000;
	text-align: center;
	&.noclose {
		&::after {
			width: 0;
		}
	}
	.content {
		position: relative;
		padding: 140rpx 40rpx 40rpx;
		border-radius: 40rpx;
		color: #fff;
		background: #0a0619 url('../../static/images/task/task-file-rule-bg.png') no-repeat;
		background-size: 654rpx 760rpx;
		width: 70%;
		margin: 250rpx auto 0;
		&.notitle {
			padding-top: 40rpx;
		}
		.popup-top {
			width: 160rpx;
			height: 160rpx;
			position: absolute;
			top: -80rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 3;
		}
		.popup-topbg {
			width: 220rpx;
			height: 240rpx;
			top: -120rpx;
			z-index: 2;
		}
		h3 {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.jysimg {
			width: 100%;
		}
		.confirmbtn {
			width: 90%;
			margin: 40rpx auto 0;
			.el-button {
				font-size: 28rpx;
			}
		}
		.popup-content {
			text-align: left;
			font: 500 28rpx/48rpx '';
		}
		.idoit {
			position: relative;
			width: 230rpx;
			height: 72rpx;
			margin: 30rpx auto 0;
			line-height: 72rpx;
			text-align: center;
			background-image: linear-gradient(-84deg, #0D00B1 0%, #6D50DF 98%);
			border: 1px solid #FFFFFF;
			border-radius: 36rpx;
			.mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 214rpx;
				height: 44rpx;
				opacity: 0.5;
				background-image: linear-gradient(0deg, #ffffff00 50%, #ffffff63 100%);
				border-radius: 32rpx;
				filter: blur(2px);
			}
		}
	}
	.closebtn {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -80rpx;
		color: #ccc;
		font-size: 48rpx;
	}
	// &::after {
	// 	content: '';
	// 	position: absolute;
	// 	height: 50rpx;
	// 	width: 2px;
	// 	background: #aaa;
	// 	left: 50%;
	// 	transform: translateX(-50%);
	// }
}
</style>